/*
* @Author: yanyanru
* @Date: 2018/4/10
* @description: 报告列表
*/
<template>
  <div>
    <div class="p-30">
      <div class="custom-title">
        <h3>报告发布</h3>
      </div>
      <el-form labelWidth="90px">
        <el-row>
            <el-col :span="8">
              <el-form-item label="标题">
                <el-input placeholder="请输入"></el-input>   
              </el-form-item>
            </el-col>
            <el-col :span="8">
               <el-form-item label="类型">
                <el-input placeholder="请选择"></el-input>   
              </el-form-item>
            </el-col>            
            <el-col :span="8" class="align-right m-t-3">
              <el-button type="primary">搜索</el-button>
              <el-button type="primary">新增报告</el-button>
              <el-button type="primary">删除</el-button>              
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="状态">
               <!-- <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in quality"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="操作时间">
               <el-date-picker
                  v-model="value6"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
                <span style="color:#606266;" class='m-l-5 m-r-5'>至</span>
                <el-date-picker
                  v-model="value6"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row class='c333 font-size-14'>共搜索到条数据</el-row>
      <el-row class="m-t-10">
        <div class="custom-alert m-b-20">
          <i class="el-icon-info"></i>
          已选择<span>{{num}}</span>项数据</div>
      </el-row>
     <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection">
        </el-table-column>
        <el-table-column
          label="报告标题"
          width="120">
          <template slot-scope="scope">

          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="报告来源"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="创建日期"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="address"
          label="创建者"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="address"
          label="报告状态">
        </el-table-column>
        <el-table-column
          prop="address"
          label="审核日期">
        </el-table-column>
        <el-table-column
          prop="address"
          label="审核者">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="text">编辑</el-button>
            <el-button type="text">发布</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="align-center m-t-30"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';
@Component({
  components: { }
})
export default class CompanyList extends Vue {
  // 初始化数据 相当于data
  public msg: number = 123;
  public value6: string = '';
  public infoTitle: string = '';
  public num: number = 9;
  public currentPage: number = 1; // 当前页码
  public pageSize: number = 1;
  public totalCount: number = 100; // 总条数
  // refs
  public $refs: { };

  // watch
  @Watch('msg')
  public onChildChanged(val: string, oldVal: string) {
    return val + '***';
  }

  // 声明周期钩子
  public mounted() {
    this.infoTitle = `已选择${this.num}项数据`;
  }
  public created() {
    this.getMessage();
  }

  // 方法
  public getMessage() {
    this.msg = 456;
  }
  public handleSizeChange() {
    this.msg = 42156;
  }
  public handleCurrentChange() {
    this.msg = 453126;
  }
  public handleSelectionChange() {
    this.msg = 456321;
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.m-t-3{
  margin-top: 3px;
}
.el-alert--info{
  background-color: #E6F3FC;
  .el-alert__title{
    color: #666;
  }
  .numStyle{
    color: #108EE9;
  }
}
.custom-alert{
  background: #E6F3FC;
  color: #909399;
  line-height: 34px;
  padding: 0 8px;
  font-size: 14px;
  .el-icon-info{
    font-size: 16px;
    width: 16px;
    margin: 0 8px;
  }
  span{
    color: #108EE9;
    font-weight: 600;
    padding: 0 3px;
  }
}
</style>
